<template>
	<view class="content">
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view @click="sousClick">
			<u-search placeholder="点击搜索" shape="square" bg-color="#FFFFFF"
			style="margin: 0 10rpx;" ></u-search>
		</view>
		<u-tabs :list="topItem" inactiveColor="#808080" active-color="#000000"
		bg-color="#F6F6F6" :current="current" @change="topItemClick" duration="0.3"></u-tabs>
		<view v-if="current == 1">
			<view class="box2">
				<view class="u-flex" style="justify-content: space-between;">
					<h3>排行榜&nbsp;＞</h3>
					<view @click="huanClick">
						<text>换一换</text>
						<u-icon name="reload"></u-icon>
					</view>
				</view>
				<scroll-view scroll-x class="scroll2">
					<view v-for="(item,index) in theCharts" :key="index"
					class="scroll-item2" :class="itemactive2===item.id?'top-active2':''"
					@click="theChartsClick(item.id)">
						<text>{{item.name}}</text>
					</view>
				</scroll-view>
				<scroll-view scroll-x class="scroll3">
					<view class="box3">
						<view v-for="(item,index) in bookData" style="display: inline-block;height: 25%;">
							<book-item :bookData="item" :index="index" @bookItemClick="bookItemClick"></book-item>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="box4" @click="aShortageOfBooks">
				<view class="u-flex" style="justify-content: space-between;margin: 10rpx; 0">
					<h3>书荒广场</h3>
					<view>更多></view>
				</view>
				<scroll-view scroll-x>
					<view class="box5">
						<view style="width: 430rpx;display: flex;height: 33%;align-items: center;margin-right: 80rpx;"
						v-for="(item,index) in 8">
							<view style="color: #FFFFFF;background-color: #f86822;border-radius: 50%;
							width: 50rpx;height: 40rpx;line-height: 40rpx;text-align: center;">#</view>
							<view style="margin-left: 10rpx;"
							 class="u-line-1">有没有能把人吓死的恐怖小说（一定要恐怖）
							 </view>
						</view>
					</view>
				</scroll-view>
			</view>
<!-- 			<view style="background-color: #FFFFFF;padding: 40rpx 0;"class="u-flex">
				<view class="u-flex-col" style="align-items: center;width: 25%;"
				v-for="(item,index) in bottomList" :key="index">
					<image :src="item.image" mode="aspectFill"
					style="width: 80rpx;height: 80rpx;"></image>
					<text>{{item.name}}</text>
				</view>
			</view> -->
		</view>
		<!-- 1 -->
		<view v-if="current == 0">
			<view style="text-align: center;background-color: #FFFFFF;font-size: 36rpx;
			color: #909399;margin-top: 50rpx;" v-if="chapters.length == 0">暂无信息</view>
			<view v-for="(item,index) in chapters" :key="index" style="background-color: #FFFFFF;
			padding: 20rpx;margin: 20rpx 0;border-radius: 0.5em;">
				<view>
					<view style="margin: 20rpx 0;"class="u-flex">
						<u-avatar :src="$url+item.avatar"></u-avatar>
						<view style="margin-left: 20rpx;">
							<view class="u-flex">
								<view>{{item.authorName}}</view>
								<text style="margin-left: 20rpx; background-color: #bc9171;color: #fdfbea; border-radius: 0.3em;padding: 5rpx 15rpx;">作者</text>
							</view>
							
							<view style="color: #B2B2B4;">{{item.updateTime | formatDate}}</view>
						</view>
					</view>
					<view style="font-size: 32rpx;">
						<view>我更新了一章</view>
						<view>{{item.chapterName}}</view>
					</view>
					<view style="margin: 10rpx;background-color: #f7f7f7;border-radius: 0.5em;padding: 30rpx;
					justify-content: space-between;"
					class="u-flex" @click="itemClick(item.bookdataId)">
						<image :src="$url+item.imageUrl" mode="aspectFill"
						style="width: 80rpx;height: 120rpx;"></image>
						<view style="flex: 1;margin: 0 20rpx;">
							<view>{{item.name}}</view>
							<view style="color: #808080;">{{item.types}}&nbsp;·&nbsp;{{item.state}}&nbsp;·&nbsp;{{item.heat}}万热度</view>
						</view>
						<view style="color: #e76f3b;">{{item.score}}分</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				current:1,
				itemactive2:1,
				topItem:[
					{
						id:1,
						name:"关注"
					},
					{
						id:2,
						name:"推荐"
					},
					// {
					// 	id:3,
					// 	name:"经典"
					// },
					// {
					// 	id:4,
					// 	name:"知识"
					// },
					// {
					// 	id:5,
					// 	name:"听书"
					// },
					// {
					// 	id:6,
					// 	name:"看剧"
					// },
					// {
					// 	id:7,
					// 	name:"漫画"
					// },
					// {
					// 	id:8,
					// 	name:"最新上架"
					// }
				],
				theCharts:[
					{id:1,name:"推荐帮"},
					{id:2,name:"完本榜"},
					{id:3,name:"口碑榜"},
					{id:4,name:"高分榜"},
					{id:5,name:"人气榜"}
				],
					// {id:1,name:"全部"},
					// {id:2,name:"完结"},
					// {id:3,name:"连载"},
					// {id:4,name:"出版"}
				// bottomList:[
				// 	{
				// 		id:1,
				// 		name:"完本",
				// 		image:"../../static/icon_4/1.jpg"
				// 	},
				// 	{
				// 		id:2,
				// 		name:"新书",
				// 		image:"../../static/icon_4/2.jpg"
				// 	},
				// 	{
				// 		id:3,
				// 		name:"短篇",
				// 		image:"../../static/icon_4/3.jpg"
				// 	},
				// 	{
				// 		id:4,
				// 		name:"书摘",
				// 		image:"../../static/icon_4/4.jpg"
				// 	}
				// ],
				bookData:[],
				bookDatas:[],
				ranX:[],
				chapters:[]
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		onLoad() {
			this.getBookData()
			this.getfollows()
		},
		methods: {
			topItemClick(e){
				this.current = e
			},
			theChartsClick(e){
				this.bookData = []
				this.itemactive2 = e
				if(e == 1){
					this.randomX()
				}else if(e == 2){
					this.bookData = this.bookDatas.filter(item=>item.state == '完结')
				}else if(e == 3){
					this.bookData = this.bookDatas.sort((a,b)=>b.heat - a.heat)
				}else if(e == 4){
					this.bookData = this.bookDatas.sort((a,b)=>b.score - a.score)
				}
			},
			async getBookData(){
				const res=await this.$myRequst({
					url:"/bookData/gets"
				})
				this.bookData = res.data.data
				this.bookDatas = this.bookData
				console.log(this.bookDatas)
			},
			bookItemClick(e){
				uni.navigateTo({
					url:"./bookItem/bookItem?id="+e
				})
			},
			huanClick(){
				this.randomX()
			},
			randomX(){//随机数相同的抹杀
				uni.showLoading({
					title:"加载中..."
				})
				this.bookData = []
				let max = 20
				let min = 1
				for (var i = 0; i < 20; i++) {
					let x = Math.floor(Math.random() * (max - min + 1)) + min
					let index = this.ranX.findIndex(i=>{ //判断是否重复，没有就返回-1
						return i == x
					})
					if(index >=0){
						this.ranX.splice(index,1)//删除
					}else{
						this.ranX = this.ranX.concat(x)
					}
				}
				this.ranX.forEach(item=>{
					this.getBookdataRandom(item).then((res)=>{
						this.bookData = this.bookData.concat(res.data.data)
					})
				})
				uni.hideLoading()
			},
			async getBookdataRandom(id){
			 	const res=await this.$myRequst({
					url:"/bookData/get/"+id
				})
				return res
			},
			sousClick(){
				uni.navigateTo({
					url:"./search-for/search-for"
				})
			},
			aShortageOfBooks(){
				uni.navigateTo({
					url:"./aShortageOfBooks/aShortageOfBooks"
				})
			},
			async getfollows(){
				const res=await this.$myRequst({
					url:"/follow/gets/Wo/"+uni.getStorageSync("userId")
				})
				this.chapters = res.data.data
				console.log(this.chapters)
			},
			itemClick(e){
				uni.navigateTo({
					url:"./bookItem/bookItem?id="+e
				})
			}
		},
		filters: {
		  numFilter (value) {
		    // 截取当前数据到小数点后两位
		    let realVal = parseFloat(value).toFixed(2)
		    return realVal
		  },
		  formatDate(value) {
		  	if(value == undefined){
		  		return;
		  	}
		  	// let date = new Date(value * 1000);
		  	let date = new Date(value);
		  	//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		  	let y = date.getFullYear();
		  	let MM = date.getMonth() + 1;
		  	MM = MM < 10 ? ('0' + MM) : MM; //月补0
		  	let d = date.getDate();
		  	d = d < 10 ? ('0' + d) : d; //天补0
		  	let h = date.getHours();
		  	h = h < 10 ? ('0' + h) : h; //小时补0
		  	let m = date.getMinutes();
		  	m = m < 10 ? ('0' + m) : m; //分钟补0
		  	let s = date.getSeconds();
		  	s = s < 10 ? ('0' + s) : s; //秒补0
		  	// return y + '-' + MM + '-' + d; //年月日
		  	return y + '-' + MM + '-' + d + ' ' + h + ':' + m+ ':' + s; //年月日时分秒
		  }
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F6F6F6;
		padding: 20rpx;
		.scroll{
			width: 100%;
			height: 100rpx;
			white-space: nowrap;
			.scroll-item{
				display: inline-block;
				width: 120rpx;
				color: #808080;
				font-size: 28rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				.text{
					font-weight: bold;
					text-align: center;
				}
				.top-active{
					font-size: 42rpx;
					color: #000000;
					transition-duration: 0.5s;
				}
			}
		}
		.box2{
			background-color: #FFFFFF;
			margin: 10rpx 10rpx;
			border-radius: 0.5em;
			padding: 20rpx;
			.scroll2{
				width: 100%;
				height: 100rpx;
				white-space: nowrap;
				.scroll-item2{
					display: inline-block;
					padding: 16rpx 27rpx;
					background-color: #f7f7f7;
					margin: 20rpx 12rpx;
					color: #808080;
					font-weight: bold;
					border-radius: 0.5em;
					font-size: 30rpx;
				}
				.top-active2{
					background-color: #fb6f31;
					color: #FFFFFF;
				}
			}
			.scroll3{
				
				.box3{
					margin-top: 25rpx;
					height: 800rpx;
					display: flex;
					flex-flow: column wrap;
				}
			}
		}
		.box4{
			background-color: #FFFFFF;
			margin: 30rpx 10rpx;
			border-radius: 0.5em;
			padding: 30rpx;
			.box5{
				height: 230rpx;
				display: flex;
				flex-flow: column wrap;
			}
		}
	}
</style>
